<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:href="${setting.siteUrl} + '/viewerjs/viewer.min.css'" rel="stylesheet">
    <script th:src="${setting.siteUrl} + '/viewerjs/viewer.min.js'"></script>
    <link rel="stylesheet" type="text/css" th:href="${setting.siteUrl} + '/layui/css/layui.css'">
    <link rel="stylesheet" th:href="${setting.siteUrl} + '/vditor@3.9.3/dist/index.css'"/>
    <title th:text="${titleName}"></title>
    <div th:replace="~{component/head.html}"></div>
    <script th:src="${setting.siteUrl} + '/js/jquery-3.5.1.min.js'"></script>
    <script th:src="${setting.siteUrl} + '/js/jquery.pjax.js'"></script>
    <script th:src="${setting.siteUrl} + '/vditor@3.9.3/dist/index.min.js'" defer></script>
    <script>
        // 加载图片，由模糊到清晰
        let remove = function (element) {
            if (element) {
                if (typeof element['remove'] === 'function') {
                    element.remove();
                } else if (element.parentNode) {
                    element.parentNode.removeChild(element);
                }
            }
        }
        let loadBanner = function (img, wrap) {
            let background = wrap.querySelector('.article-background')
            let container = wrap.querySelector('.lazyload-container')
            if (!background) {
                console.warn("background is null", background);
                return;
            }
            if (!container) {
                console.warn("container is null", container);
                return;
            }
            background.classList.add("loading");
            remove(img);
            container.style.backgroundImage = 'url("' + img.src + '")';
            container.classList.add('loaded');
            let largeImage = new Image();
            largeImage.src = img.getAttribute('data-src');
            largeImage.onload = function () {
                remove(this);
                background.style.backgroundImage = 'url("' + img.getAttribute('data-src') + '")';
                background.classList.remove('loading');
                container.classList.remove('loaded');
                setTimeout(function () {
                    remove(container);
                }, 1001);
            }
        }
        let loadArticlesImage = function (img, thumbnailImg) {
            img.style.display = 'block'
            remove(thumbnailImg)
        }
    </script>
</head>
<body>
<!--[if lt IE 9]>
<div class="browse-happy" role="dialog">当前网页 <strong>不支持</strong> 你正在使用的浏览器. 为了正常的访问, 请 <a
        href="https://browsehappy.com/">升级你的浏览器</a>.
</div>
<![endif]-->
<div th:insert="~{component/sidebar.html}"></div>
<div id="top" class="animateIn">
    <div th:insert="~{component/article-top.html}"></div>
    <div class="scrollbar gradient-bg-rev" style="width: 0;"></div>
</div>
<div id="content-body" th:switch="${mark}">
    <div th:case="articles" th:insert="~{articles.html}"></div>
    <div th:case="article" th:insert="~{article.html}"></div>
    <div th:case="archives" th:insert="~{archives.html}"></div>
    <div th:case="articles-query" th:insert="~{articles-query.html}"></div>
    <div th:case="categories" th:insert="~{categories.html}"></div>
    <div th:case="tags" th:insert="~{tags.html}"></div>
    <div th:case="404" th:insert="~{404.html}"></div>
</div>
<iframe th:replace="~{component/footer.html}"></iframe>
<script th:inline="javascript">
    let pjaxSiteUrl = [[${setting.siteUrl}]]
    $(function () {
        $('body').pjax('a[href^="' + pjaxSiteUrl + '"]:not(a[target="_blank"], a[not-pjax]), a[data-pjax]', {
                container: '#content-body',
                timeout: 8000
            }
        ).on('pjax:click', function () {
        }).on('pjax:send', function () {
            unbindEvent()
        }).on('pjax:complete', function () {
            let page = searchParse()['page']
            if(page) {
                $('html, body').animate({
                    scrollTop: window.innerHeight * 0.8
                }, 0)
            }
        }).on('pjax:end', function () {
        });

        if (window.history && window.history.pushState) {
            window.onpopstate = function () {
                unbindEvent()
            };
        }

        function unbindEvent() {
            $('.changeTheme').unbind('click')
            $(window).unbind('scroll')
            $(window).unbind('resize')
            document.querySelector(".scrollbar").style.width = 0 + '%'
        }

        function searchParse() {
            let resultObj = {};
            let search = window.location.search;
            if (search && search.length > 1) {
                let s = search.substring(1);
                let items = s.split('&');
                for (let index = 0; index < items.length; index++) {
                    if (!items[index]) {
                        continue;
                    }
                    let kv = items[index].split('=');
                    resultObj[kv[0]] = typeof kv[1] === "undefined" ? "" : kv[1];
                }
            }
            return resultObj;
        }
    });
</script>
</body>
</html>

